<!--组织架构 部门-->
<template>
  <div class="base-content system-department">
    <div class="basic-info">
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="add"
          >{{ btn.Add }}</el-button
        >
      </div>
      <!--列表-->
      <el-table
        ref="table"
        v-loading="tableLoad"
        :data="tableData"
        :tree-props="{ children: 'children', hasChildren: '!hasChildren' }"
        row-key="id"
        style="width: 100%"
        height="calc(100% - 130px)"
      >
        <el-table-column prop="name" :label="dataList.NameC" min-width="120">
          <template slot-scope="{ row }">
            <div
              class="extend-content"
              :style="{ 'padding-left': `${row.level * 16}px` }"
              @click="openExtend(row)"
            >
              <i
                v-if="row.hasChildren && row.expanded"
                class="el-icon-arrow-down"
              ></i>
              <i
                v-if="row.hasChildren && !row.expanded"
                class="el-icon-arrow-right"
              ></i>
              <span
                :style="{ 'padding-left': !row.hasChildren ? '16px' : '' }"
                >{{ $i18n.locale === "en" ? row.eName : row.name }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="dataList.status" min-width="80">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              :disabled="!isEdit"
              @change="(val) => changeState(val, row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="operation" :label="btn.operate" width="140">
          <template slot-scope="{ row }">
            <el-link v-rights="'Add'" type="primary" @click="add(row)">{{
              btn.Add
            }}</el-link>
            <el-divider
              class="base-content-table-divider"
              direction="vertical"
            />
            <el-link v-rights="'Edit'" type="primary" @click="edit(row)">{{
              btn.Edit
            }}</el-link>
            <el-divider
              class="base-content-table-divider"
              direction="vertical"
            />
            <el-link v-rights="'Delete'" type="danger" @click="del(row)">{{
              btn.Delete
            }}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--新增/编辑-->
    <PermissionDepartmentDialog
      v-model="isShowDialog"
      :read-only="readOnly"
      :parent-id="parentId"
      :edit-id="editId"
      @success="dialogCallBack"
    />
  </div>
</template>

<script>
import {
  departmentTree,
  departmentDelete,
  departmentEnableById,
  departmentDisableById,
} from "../../../api/Permission/PermissionDepartment.js";
import { formatData, getArrayIndex } from "../../../utils/index";
import { CommonConstStatus } from "../../../utils/dictionary";
import PermissionDepartmentDialog from "./PermissionDepartmentDialog";
import { mapGetters } from "vuex";
export default {
  name: "PermissionDepartmentList",
  components: {
    PermissionDepartmentDialog,
  },
  data() {
    return {
      CommonConstStatus,
      tableLoad: false,
      tableData: [],
      isShowDialog: false,
      readOnly: false,
      editId: null,
      parentId: null,
      expandRowkeys: [],
    };
  },
  computed: {
    ...mapGetters(["operateMap"]),
    isEdit() {
      return this.operateMap.get(`${this.$route.path}/Disable`);
    },
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  created() {
    this.getDepartmentTree();
  },
  methods: {
    // 获取部门数据
    getDepartmentTree() {
      this.tableLoad = true;
      departmentTree()
        .then((res) => {
          // 格式化数据
          const formatTableData = formatData(res.data);
          // 默认展开
          this.isExpand(formatTableData, this.expandRowkeys);
          this.tableData = formatTableData;
          this.tableLoad = false;
        })
        .catch(() => {
          this.tableLoad = false;
        });
    },
    // 是否展开
    isExpand(data, expandIds) {
      if (data.length) {
        data.forEach((v) => {
          v.expanded = expandIds.includes(v.id);
          // 只有父级展开 子级才会展开
          if (v.expanded && v.children && v.children.length) {
            this.isExpand(v.children, expandIds);
          }
        });
      }
    },
    // 新增
    add(row) {
      this.clearUserInfoState();
      this.parentId = row.id;
      this.isShowDialog = true;
    },
    // 修改
    edit(row) {
      this.clearUserInfoState();
      this.editId = row.id;
      this.isShowDialog = true;
    },
    // 清空弹框状态
    clearUserInfoState() {
      this.readOnly = false;
      this.editId = "";
      this.parentId = "";
    },
    async changeState(val, row) {
      if (!val) {
        await departmentDisableById({ id: row.id });
      } else {
        await departmentEnableById({ id: row.id });
      }

      this.getDepartmentTree();
    },
    // 删除
    del(row) {
      const self = this;
      this.$confirm(
        this.$t("Permission.buttons.IsDeleteFlow"),
        this.$t("Permission.buttons.Delete"),
        {
          type: "warning",
          confirmButtonText: this.$t("Permission.buttons.Confirm"),
          okType: "danger",
          center: true,
          cancelButtonText: this.$t("Permission.buttons.Cancel"),
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              departmentDelete({ id: row.id })
                .then(() => {
                  instance.confirmButtonLoading = false;
                  done();
                  // self.$message.success('操作成功');
                  self.getDepartmentTree();
                })
                .catch(() => {
                  instance.confirmButtonLoading = false;
                });
            } else {
              done();
            }
          },
        }
      ).catch();
    },
    // 查看子级
    openExtend(row) {
      row.expanded = !row.expanded;
      // 展开
      if (row.expanded) {
        this.expandRowkeys.push(row.id);
      } else {
        // 收起
        this.expandRowkeys.splice(getArrayIndex(this.expandRowkeys, row.id), 1);
      }
      this.$refs.table.toggleRowExpansion(row, row.expanded);
    },
    // 弹框回调
    dialogCallBack() {
      this.getDepartmentTree();
    },
  },
};
</script>

<style lang="scss">
.system-department {
  .extend-content {
    cursor: pointer;
    .open-extend-icon {
      margin: 0 4px 0 0;
      transform: rotate(-90deg);
      transition: all 0.3s;
    }
    .expanded-row {
      transform: rotate(0);
    }
  }
  .el-table {
    .el-table__expand-icon {
      display: none !important;
    }
    .el-table__indent,
    .el-table__placeholder {
      display: none !important;
    }
  }
  .el-table::before {
    position: relative !important;
  }
}
</style>
